<template>
    <div class="container">
      <div class="header">
        <div class="title">项目列表</div>
        <el-button
        style="margin-left: 30px;"
        @click.prevent="handleAdd"
        type="primary"
        plain
        size="medium"
        v-permission="{ permission: '创建项目', type: 'disabled' }"
        >创建项目</el-button>      
      </div>

      <el-table stripe v-loading="loading" :data="tableData">
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="user_id" label="用户ID"></el-table-column>
        <el-table-column prop="title" label="主题" width="200"></el-table-column>
        <el-table-column prop="type" label="类型">
          <template v-if="scope.row.type" slot-scope="scope">{{ scope.row.type | onType }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-if="scope.row.status" slot-scope="scope">{{ scope.row.status | onStatus }}</template>
        </el-table-column>
        <el-table-column prop="tag" label="标签名称" ></el-table-column>
        <el-table-column prop="color" label="颜色" >
          <template v-if="scope.row.color" slot-scope="scope">
            <div v-html="onColor(scope.row.color)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="backgroud_color" label="背景颜色">
          <template v-if="scope.row.backgroud_color" slot-scope="scope">
            <div v-html="onBackgroundColor(scope.row.backgroud_color)"></div>
          </template>
          <!-- <div style="background-color: rgba(109,173,255,0.2); width: 20px; height: 20px;"></div> -->
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="description"
          min-width="200"
          label="描述"
        ></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="150"> </el-table-column>
        <el-table-column fixed="right" width="150" label="操作">
          <template slot-scope="scope">
            <el-button @click.prevent="handleEdit(scope.row)" type="primary" plain size="mini">编辑</el-button>
            <el-button
              v-permission="{ permission: '删除项目', type: 'disabled' }"
              @click.prevent="handleDelete(scope.row)"
              type="danger"
              size="mini"
              plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="totalNums"
        ></el-pagination>
      </div>
    <create-edit 
      v-if="dialogFormVisible"
      :dialogFormVisible="dialogFormVisible"
      :isCreate="isCreate" 
      :projectId="projectId"
      @dialogClose="dialogClose"
    ></create-edit>
  </div>
  

</template>

<script>

import Project from '@/model/project'
import CreateEdit from './create-edit'

export default {
  components: {
    CreateEdit,
  },
  data() {
    return {
      isCreate: false,
      tableData: [],
      showEdit: false,
      totalNums: 0,
      currentPage: 1,
      pageCount: 10,
      refreshPagination: true,
      loading: false,
      projectId: 0,
      dialogFormVisible: false, // 展示弹窗
    }
  },
  async created() {
    this.loading = true
    this.getLists()
    this.loading = false
  },
  methods: {
    async getLists() {
      const page = this.currentPage - 1
      const count = this.pageCount
      const projects = await Project.getList(page, count)
      this.tableData = projects.items
      this.totalNums = projects.total
    },
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this.getLists()
      this.loading = false
    },
    // 获取所拥有的权限并渲染  由子组件提供
    handleAdd() {
      this.dialogFormVisible = true
      this.isCreate = true
    },
    handleEdit(val) {
      this.projectId = val.id
      this.isCreate = false
      this.dialogFormVisible = true
    },
    async handleDelete(val) {
      let res
      this.$confirm('此操作将永久删除该项目，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          this.loading = true
          res = await Project.delete(val.id)
        } catch (e) {
          this.loading = false
          console.log(e)
        }
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.loading = false
          if (this.totalNums % this.pageCount === 1 && this.currentPage !== 1) {
            this.currentPage--
          }
          this.getLists()
          this.$message({
            type: 'success',
            message: `${res.message}`,
          })
        } else {
          this.loading = false
          this.$message.error(`${res.message}`)
        }
      })
    },
    async dialogClose() {
      this.dialogFormVisible = false
      this.loading = true
      this.getLists()
      this.loading = false
    },
    onColor(val) {
      return `<div style="background-color: ${val}; width: 20px; height: 20px;"></div>`
    },
    onBackgroundColor(val) {
      return `<div style="background-color: ${val}; width: 20px; height: 20px;"></div>`
    }
  },
  filters: {
    onType(val) {
      const obj = {
        1: "工作项目",
        2: "学习项目"
      }
      return obj[val]
    },
    onStatus(val) {
      const obj = {
        1: "未开始",
        2: "已结束",
        3: "进行中"
      }
      return obj[val]
    },
  }
  
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }
}
</style>
